<template>
  <button @click="add">点我自增</button>
  <span> 您现在第{{ count }}次访问{{ counterName }}</span>
</template>

<script lang="ts" setup>
import { ref } from "vue";
// const props=defineProps(['counterName','width'])
// const props = defineProps({
//   counterName: { type: String, default: "哈哈哈" },
//   // width:Number,
//   // isFirst:Boolean
// });

const props = defineProps(["counterName", "width"]);
console.log("子组件中的name是", props.counterName);
console.log("子组件中的width是", props.width);
console.log("子组件中的isFirst是", props.isFirst);
let count = ref(0);
let age: number = 33;
function add() {
  count.value++;
  //可以修改对象类型的数据，但是建议不要这么做，会导致代码耦合性变强。
  // props.counterName.name = "roy" + count.value;
}
</script>

<style lang="scss" scoped></style>
